<template>
	<view class="container">
		<image class="bg" src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/has_bg.png" mode="scaleToFill" />
		<view class="has_bg">
			<view class="header">
				<view class="avator">
					<image :src="userInfo.headPic" @click="toEdituser"></image>
				</view>
				<view class="info" v-if="isLogin">
					<view class="name">{{ userInfo.nickName }}</view>
					<view class="lv" v-if="userInfo.userRole > 0">
						<image src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/badge.png" mode="scaleToFill" />
						<text>Lv.{{ userInfo.vipRank }}能量王者 ></text>
						<view class="point"></view>
					</view>
				</view>

				<view class="info" v-else @click="toPage('pages/login/index')">
					<view class="name"> 登录/注册 </view>
					<view class="lv_text"> 立即登录 </view>
				</view>
			</view>
			<view class="des" v-if="isLogin && userInfo.userRole > 0">
				<image class="des-img" src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des.png" mode="scaleToFill" />
				<view class="auth">
					<view class="title">您可享6项权益~</view>
					<!-- <view class="btn">
						<text>查看更多></text>
					</view> -->
				</view>
				<view class="des-box">
					<view class="item" v-for="(item, index) in des" :key="index">
						<image :src="item.img"></image>
						<view class="label">{{ item.label }}</view>
					</view>
				</view>
			</view>

			<view class="order">
				<view class="routes">
					<view
						class="route"
						v-for="(item, index) in orderRoutes"
						:key="index"
						@click="toPage('pagesA/mine/order?current=' + index)"
					>
						<view class="tipstext" v-if="item.tips > 0">{{ item.tips }}</view>
						<image :src="item.img"></image>
						<view class="label">
							<text>{{ item.label }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="myyanxue" @click="toMyyanxue">
				<view class="top">
					<view class="t_left">我的研学</view>
					<view class="t_right">研学详情></view>
				</view>
				<view class="bottom">
					<view class="bottombox">
						<view class="b_top">{{ userInfo.projectStatusData.projectAmount || 0 }} <text>个</text> </view>
						<view class="b_bottom">进行中的研学</view>
					</view>
					<view class="bottombox">
						<view class="b_top">{{ userInfo.projectStatusData.finishAmount || 0 }}<text>个</text> </view>
						<view class="b_bottom">已完成的研学</view>
					</view>
					<view class="bottombox">
						<view class="b_top">{{ userInfo.projectStatusData.inviteAmount || 0 }} <text>人</text> </view>
						<view class="b_bottom">邀请人数</view>
					</view>
				</view>
			</view>
			<view class="func">
				<view class="routes">
					<view class="route" v-for="(item, index) in funcRoutes" :key="index" @click="toFuncClick(item)">
						<image :class="'img' + index" :src="item.img"></image>
						<view class="label">{{ item.label }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { checkLogin } from '@/core/app'
import { getUserInfo } from '@/api/yanxue/user'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			isLogin: false,
			userInfo: {
				avator: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_avator.png',
				name: '',
				lv: 3,
				projectStatusData: {},
				vipRank: 0
			},
			des: [
				{ label: '专属价格', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des_price.png' },
				{ label: '优先体验', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des_flag.png' },
				{ label: '后台管理', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/mine_des_m.png' }
			],
			orderRoutes: [
				{ label: '研学/待出发', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon1.png' },
				{ label: '文创/待发货', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon2.png' },
				{ label: '文创/待收货', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon3.png' },
				{ label: '师训/待学习', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/order_icon4.png' },
				{
					label: '全部订单',
					img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1733572377590pFyFLNSmb4dqc906d0a5ef6108606dad22f52825ee41.png'
				}
			],
			funcRoutes: [
				{ label: '客户分析', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/shujufenxi.png' },
				{ label: '宣传物料', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/wuliao.png' },
				{ label: '每日任务', img: '/static/newicons/center_myrw.png' },
				{ label: '每月计划', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/meiyuejihua.png' },
				{ label: '总部指导', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/zongbuzhidao.png' },
				{ label: '合同管理', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/hetongguanli.png' },
				{ label: '我的伙伴', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/wodehuoban.png' },
				{ label: '我的奖金', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/jaingjin.png' },
				{ label: '一键绑定', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/role/yijianbangding.png' },
				{ label: '关于我们', img: '/static/newicons/center_about.png' }
			],
			userRouter: [
				{
					label: '今日风采',
					img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/persons/jinrifegncai.png'
				},
				// {
				// 	label: '老师点评',
				// 	img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/persons/laoshidianping.png'
				// },
				// {
				// 	label: '课程介绍',
				// 	img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/persons/kechengjieshao.png'
				// },
				{
					label: '衣食住行',
					img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/persons/yishizhuxing.png'
				},
				{
					label: '推荐分享',
					img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/persons/tuijianfenxiang.png'
				},

				{ label: '关于我们', img: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/icon/persons/aboutus.png' }
			]
		}
	},
	onShow() {
		this.onRefreshPage()
		if (this.isLogin) {
			this.getInfo()
		}
	},
	methods: {
		toFuncClick(item) {
			console.log(item)
			if (item.label == '一键绑定') this.$navTo('pagesA/bangding/index')
			if (item.label == '合同管理') this.$navTo('pagesA/contract/index')
			if (item.label == '我的伙伴') this.$navTo('pagesA/mine/rank')
			if (item.label == '我的奖金') this.$navTo('pagesA/mine/commission/index')
			if (item.label == '总部指导') this.$navTo('pagesA/mine/guide')
			if (item.label == '每月计划') this.$navTo('pagesA/mine/plan?type=month')
			if (item.label == '每日任务') this.$navTo('pagesA/mine/plan?type=day')
			if (item.label == '客户分析') this.$navTo('pagesA/analysis/index')
			if (item.label == '宣传物料') this.$navTo('pages/yanxue/addyanxue?type=xcwl')

			if (item.label == '关于我们') this.$navTo('pagesA/aboutus/index?type=2')

			if (item.label == '今日风采') this.$navTo('pagesA/mine/myyanxue/index?type=1')
			if (item.label == '老师点评') this.$navTo('pagesA/mine/myyanxue/index?type=3')
			if (item.label == '推荐分享') this.$navTo('pagesA/mine/commission/userrecom')
			if (item.label == '衣食住行') this.$navTo('pagesA/aboutus/index?type=1')
		},
		toEdituser() {
			if (this.isLogin) {
				this.$navTo('pagesA/ParentalCertification?edit=1')
			}
		},
		toMyyanxue() {
			this.$navTo('pagesA/mine/myyanxue/index')
		},
		toPage(url) {
			this.$navTo(url)
		},
		toScore() {
			this.toPage('pagesA/school/input_score/input_score')
		},
		// 刷新页面
		onRefreshPage() {
			// 判断是否已登录
			this.isLogin = checkLogin()
			// 获取页面数据
			// this.getPageData()
			console.log(this.isLogin, 'isLogin')
		},
		getInfo() {
			getUserInfo({}).then(res => {
				if (res.status == 0) {
					this.userInfo = res.result
					let odInfo = res.result.orderInfo
					if (res.result.userRole == 0) {
						this.funcRoutes = this.userRouter
					}
					let total = 0
					for (const key in odInfo.projectingAmount) {
						total += odInfo.projectingAmount[key]
					}
					this.orderRoutes[0]['tips'] = odInfo.projectingAmount || 0
					this.orderRoutes[1]['tips'] = odInfo.unSendProductAmount || 0
					this.orderRoutes[2]['tips'] = odInfo.unSureProductAmount || 0
					this.orderRoutes[3]['tips'] = odInfo.unStudyAmount || 0
					this.orderRoutes[4]['tips'] = total
					this.$store.commit('SET_USER_INFO', res.result)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		hidePhone(str) {
			return str && str.length && str.length == 11 && str.slice(0, 4) + '****' + str.slice(7, 11)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;

	.bg {
		width: 100%;
		height: 660rpx;
		position: absolute;
		top: 0;
	}

	.has_bg {
		position: relative;
	}

	.header {
		display: flex;
		padding: 154rpx 20rpx 20rpx 20rpx;

		.avator {
			width: 138rpx;
			height: 138rpx;
			border-radius: 138rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20rpx;

			.name {
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #000000;
				margin-top: 24rpx;
				line-height: 46rpx;
				width: 320rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.lv {
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				width: 308rpx;
				height: 48rpx;
				background: #ffffff;
				border-radius: 24rpx;

				image {
					width: 66rpx;
					height: 62rpx !important;
					margin-right: 10rpx;
				}

				.point {
					width: 12rpx;
					height: 12rpx;
					background: #f95513;
					border-radius: 50%;
					margin-left: 6rpx;
				}
			}
		}
	}

	.des {
		position: relative;

		.auth {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			width: 500rpx;
			top: 48rpx;
			left: 166rpx;

			.title {
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
			}

			.btn {
				width: 132rpx;
				height: 48rpx;
				background: #73ff15;
				border-radius: 22rpx;
				border: 2px solid #000000;
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #000000;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					transform: scale(0.83333);
					display: block;
					line-height: 24rpx;
				}
			}
		}

		.des-img {
			width: 100%;
			height: 204rpx;
		}

		.des-box {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 28rpx;
			width: 100%;

			.item:not(:last-child) {
				margin-right: 24rpx;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 174rpx;
				height: 46rpx;
				background: #cdff8c;
				border-radius: 22rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				.label {
					font-family: HarmonyOS Sans SC;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}
	}

	.order {
		padding: 40rpx 22rpx 24rpx 22rpx;
		width: 702rpx;
		height: 176rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;

		.title {
			font-size: 32rpx;
			color: #333;
		}

		.routes {
			display: flex;
			flex-wrap: wrap;

			.route {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				flex: 1;
				.tipstext {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					right: 20rpx;
					top: 0;
					border-radius: 50%;
					background: #f95513;
					text-align: center;
					line-height: 30rpx;
					font-weight: 500;
					font-size: 18rpx;
					color: #ffffff;
				}
				image {
					width: 62rpx;
					height: 62rpx;
				}

				.label {
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					margin-top: 30rpx;

					text {
						transform: scale(0.83333);
						line-height: 24rpx;
						display: block;
					}
				}
			}
		}
	}
	.myyanxue {
		width: 702rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;
		.top {
			display: flex;
			padding: 16rpx 24rpx 0;
			align-items: center;
			justify-content: space-between;
			.t_left {
				height: 30rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
			}
			.t_right {
				height: 20rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #9a9a9a;
			}
		}
		.bottom {
			margin-top: 26rpx;
			display: flex;
			.bottombox {
				width: 702rpx;
				height: 110rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.b_top {
					height: 40rpx;
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 50rpx;
					color: #000000;
					text {
						font-size: 24rpx;
					}
				}
				.b_botttom {
					width: 118rpx;
					height: 20rpx;
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #000000;
					margin-top: 28rpx;
				}
			}
		}
	}

	.func {
		width: 702rpx;
		// height: 370rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;
		padding: 38rpx 30rpx 38rpx 30rpx;

		.title {
			font-size: 32rpx;
			color: #333;
		}

		.routes {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			row-gap: 72rpx;

			.route {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.img9 {
					width: 100rpx;
					height: 48rpx;
					margin-top: 12rpx;
				}

				.label {
					font-size: 24rpx;
					color: #666;
					margin-top: 10rpx;
				}
			}
		}
	}
}
.info_phone,
.score {
	font-size: 32rpx;
	font-family: PingFang-SC-Bold, PingFang-SC;
	font-weight: bold;
	color: #ffffff;
}
.info_text,
.score_text {
	font-size: 24rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #ffffff;
}
</style>
